<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>密码登陆</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1516407_fx9en0nm4fw.css">
    <style>
        body,
        html {
            width: 100%;
        }

        #warp {
            width: 100%;
            height: 30px;
            background: #eeeeee;
        }

        .topHerd {
            width: 80%;
            height: 36px;
            font-size: 12px;
            color: #727272;
            margin: auto;
            line-height: 36px;
        }

        .topLeft {
            width: 25%;
            float: left;
        }

        .topRight {
            width: 60%;
            float: right;
            line-height: 16px;
            margin-top: 8px;
        }

        .topRight div {
            display: inline-block;
        }

        .rightOne {
            float: right;
            width: 35%;
            height: 16px;
            text-align: center;
            border-right: 1px solid #999;
        }

        .rightTwo {
            float: right;
            width: 13%;
            height: 16px;
            text-align: center;
            border-right: 1px solid #999;
        }

        .topThree {
            float: right;
            margin-left: 2%;
        }

        .topThree span {
            font-size: 13px;
            color: #4b943d;
        }

        #heard {
            width: 100%;
        }

        #heard iframe {
            width: 100%;
            height: 40px;
            overflow: hidden;
            border: none;
        }

        .logo {
            width: 80%;
            margin: auto;
            margin-top: 15px;
            text-align: center;
            overflow: hidden;
        }

        .logoImage {
            float: left;
            width: 50%;
            position: relative;
        }

        .logoImage img {
            width: 70%;
            float: left;
            vertical-align: text-bottom;
        }

        .logoFont {
            width: 22%;
            height: 38px;
            float: left;
            margin-left: 6%;
            line-height: 38px;
            font-size: 20px;
            color: #666;
            text-align: center;
            border-left: 1px solid #cecece;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

        .content {
            width: 100%;
            margin-top: 30px;
            position: relative;
        }

        .conImage {
            width: 100%;
            border: 1px solid #dddddd;
            font-size: 0px;
        }

        .conImage img {
            width: 100%;
            height: 400px;


        }

        .conSet {
            width: 300px;
            height: 150px;
            border: 1px solid #fff;
            position: absolute;
            left: 30%;
            top: 50%;
            margin-top: -75px;
        }

        .setFont {
            width: 280px;
            height: 130px;
            border: 1px solid #fff;
            margin: 10px auto;
        }

        .setFont p {
            width: 280px;
            height: 65px;
            font-size: 30px;
            line-height: 65px;
            color: #fff;
            text-align: center;

        }

        .setFont p:nth-child(2) {
            text-align: center;
            letter-spacing: 1.2em;

        }

        .setlogin,
        .setReigsiter,
        .back,.phonelogion {
            width: 320px;
            height: 398px;
            border: 1px solid #fff;
            background: #fff;
            position: absolute;
            top: 1px;
            left: 63%;
        }

        #setPhone span {
            display: inline-block;
            color: red;
            font-size: 12px;

        }

        #setPhone,
        .setPass,
        #codeFat,
        .setlogin-tishi {
            width: 80%;
            height: 30px;
            margin: auto;
            margin-top: 25px;


        }

        #setPhone input,
        .setPass input {
            width: 100%;
            height: 100%;
        }

        .setlogin-heard {
            width: 80%;
            height: 30px;
            font-size: 22px;
            color: #666;
            margin: auto;

            overflow: hidden;
            margin-top: 10px;
        }

        .setlogin-heard span {
            height: 30px;
            line-height: 30px;
            text-align: right;
            float: left;
        }

        .setlogin-heard strong,
        .setlogin-heard i {
            height: 30px;
            line-height: 30px;
            text-align: right;
            font-size: 14px;
            color: #498e3d;
            float: right;
        }

        #codeFat input {
            width: 25%;
            height: 30px;
            float: left;
        }

        #canvas {
            width: 38%;
            height: 35px;
            float: left;
            margin-left: 2%;
            margin-right: 2%;
        }

        #cut {
            width: 30%;
            height: 30px;
            float: left;
            line-height: 30px;
            font-size: 10px;
            color: #666;
            text-align: top;

        }

        .codePhone {
            width: 80%;
            height: 30px;
            margin: auto;
            margin-top: 25px;
            position: relative;

        }

        .phoneCode {
            width: 100%;
            height: 30px;
        }

        .btnCode {
            width: 37%;
            height: 26px;
            font-size: 12px;
            color: #fff;
            background: #498e3d;
            border: none;
            position: absolute;
            top: 5px;
            right: 1%;

        }

        .setlogin-tishi input {
            font-size: 14px;
            color: #959595;

        }

        .setlogin-tishi a {
            color: #f4a767;
            float: right;
            text-decoration: underline;
        }

        #tishi-log {
            font-size: 12px;
        }

        /* 改变checkbook的默认样式 */
        input[type=checkbox] {
            margin-right: 5px;
            cursor: pointer;
            font-size: 12px;
            width: 10px;
            height: 10px;
            position: relative;
        }

        input[type=checkbox]:after {
            position: absolute;
            width: 9px;
            height: 13px;
            top: -2px;
            content: " ";
            color: #fff;
            display: inline-block;
            visibility: visible;
            padding: 0px 2px;
            border-radius: 3px;
            background: #FFFFFF;
            border: 1px solid #DDDDDD;
        }

        input[type=checkbox]:checked:after {
            content: "✓";
            font-size: 12px;
            font-weight: 600;
            background-color: #36AEFF;
        }

        .loginBtn {
            width: 80%;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }

        .butnBack {
            width: 100%;
            height: 35px;
            margin-top: 15px;
            border: none;
            font-size: 17px;
            color: #FFF;
            border-radius: 5px;
            background: #f08200;
        }

        .loginBtn span,
        .loginBtn strong {
            width: 40%;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            background: #f08200;
            text-align: center;
            border-radius: 5px;

        }

        .loginBtn strong {
            background: #498e3d;
        }

        .loginfont {
            width: 80%;
            margin: auto;
            font-size: 10px;
            color: #b6b6b6;
            margin-top: 5px;
        }

        .loginFooter {
            width: 80%;
            height: 30px;
            margin: auto;
            position: relative;

        }

        .loginFooter span {
            display: inline-block;
            width: 100%;
            border-top: 1px dashed #ccc;
        }

        .loginFooter-p {
            width: 40%;
            height: 30px;
            background: #fff;
            font-size: 14px;
            color: #666;
            text-align: center;
            line-height: 30px;
            position: absolute;
            top: 0px;
            left: 30%;
        }

        .disanfang {
            width: 80%;


            margin: auto;
            color: #51dd5a;
            display: flex;
            justify-content: center;
        }

        .disanfang span {
            font-size: 35px;
            color: #4dafea;
        }

        .disanfang i {
            font-size: 35px;

        }

        .footerIframe {
            width: 100%;
        }

        .footerIframe iframe {
            width: 100%;
            height: 300px;
            border: none;
        }
    </style>
</head>

<body>
    <div id="warp">
        <div class="topHerd">
            <div class="topLeft">
                <label> 所在城市:</label>
                <select name="" id="">
                    <option value="">
                        郑州市区
                    </option>
                </select>
            </div>
            <div class="topRight">
                <div class="topThree">
                    <span class="iconfont icon-dianhua"></span>
                    400-800-8820

                </div>
                <div class="rightTwo">
                    我是商家
                </div>
                <div class="rightTwo">
                    我的消息
                </div>
                <div class="rightTwo">
                    我的订单
                </div>
                <div class="rightOne">
                    你好:
                    <strong>
                        199999999999
                    </strong>
                    <span>
                        退出
                    </span>
                </div>
            </div>

        </div>
        <div class="logo">
            <div class="logoImage">
                <img src="../../img/img-JL/logo.png" alt="">
                <span class="logoFont">密码登陆</span>
            </div>
        </div>
        <div class="content">
            <div class="conImage">
                <img src="../../img/img-JL/photo1.png" alt="">
            </div>
            <div class="conSet">
                <div class="setFont">
                    <p>礼拜五会员</p>
                    <p>免费注册</p>
                </div>
            </div>
            <!-- 密码登陆 -->
            <!-- <div class="setlogin">

                <div class="setlogin-heard">
                    <span>登录</span>
                    <i class="iconfont icon-shouji"></i>
                    <strong>手机验证登陆</strong>

                </div>

                <form>
                    <p id="setPhone">
                        <input id="phone" name="firstname" type="text" placeholder="请输入手机号">
                    </p>
                    <p class="setPass">
                        <input id="lastname" name="lastname" type="text" placeholder="密码">
                    </p>
                    <div id="codeFat">
                        <input type="text" id="code" placeholder="验证码">
                        <canvas id="canvas" width="100" height="43" onclick="dj()"
                            style="border: 1px solid #ccc; border-radius: 5px;"></canvas>
                        <p id="cut">看不清换一张</p>
                    </div>
                    <p class="setlogin-tishi">
                        <input type="checkbox">自动登陆
                        <a href=""> 忘记密码？</a>
                    </p>
                    <p class="loginBtn">
                        <span>登录</span>
                        <strong>会员注册</strong>
                    </p>
                    <p class="loginfont">
                        提示：未注册的用户将直接注册成为礼拜五的用户
                    </p>
                    <p class="loginFooter">
                        <span></span>
                        <strong class="loginFooter-p">合作网站登录</strong>
                    </p>
                    <div class="disanfang">
                        <i class="iconfont icon-weixin"></i>
                        <span class="iconfont icon-qqicon"></span>
                    </div>
                </form>

            </div> -->

            <!-- 注册会员 -->

            <!-- <div class="setReigsiter">
                <form>
                    <p id="setPhone">
                        <input id="phone" name="firstname" type="text" placeholder="请输入手机号">
                    </p>
                    <p class="setPass">
                        <input id="lastname" name="lastname" type="password" placeholder="密码">
                    </p>
                    <p class="setPass">
                        <input id="lastpass" name="lastpass" type="password" placeholder="密码">
                    </p>
                    <div id="codeFat">
                        <input type="text" id="code" placeholder="验证码">
                        <canvas id="canvas" width="100" height="43" onclick="dj()"
                            style="border: 1px solid #ccc; border-radius: 5px;"></canvas>
                        <p id="cut">看不清换一张</p>
                    </div>
                    <div class="codePhone">
                        <input type="text" class="phoneCode" placeholder="手机验证码">
                        <input type="button" class="btnCode" value="获取手机验证码">
                    </div>
                    <p class="setlogin-tishi">
                        <input type="radio">
                        <span id="tishi-log">
                            我已阅读并同意《礼拜五用户协议》
                        </span>

                    </p>
                    <p class="loginBtn">
                        <span>注册</span>
                        <strong>登录</strong>


                    </p>

                </form>
            </div> -->

            <!-- 找回密码 -->
            <!-- <div class="back">
                <form>
                    <p id="setPhone">
                        <input id="phone" name="firstname" type="text" placeholder="请输入手机号">
                    </p>
                    <div id="codeFat">
                        <input type="text" id="code" placeholder="验证码">
                        <canvas id="canvas" width="100" height="43" onclick="dj()"
                            style="border: 1px solid #ccc; border-radius: 5px;"></canvas>
                        <p id="cut">看不清换一张</p>
                    </div>
                    <p class="setPass">
                        <input id="lastname" name="lastname" type="password" placeholder="密码">
                    </p>
                    <p class="setPass">
                        <input id="lastpass" name="lastpass" type="password" placeholder="密码">
                    </p>

                    <div class="codePhone">
                        <input type="text" class="phoneCode" placeholder="手机验证码">
                        <input type="button" class="btnCode" value="获取手机验证码">
                    </div>
                    <p class="setlogin-tishi">
                        <input type="radio">
                        <span id="tishi-log">
                            我已阅读并同意《礼拜五用户协议》
                        </span>

                    </p>
                    <p class="loginBtn">
                        <input type="button" class="butnBack" value="提交">


                    </p>

                </form>
            </div> -->
            <!-- 手机登录 -->
            <div class="phonelogion">
                    <div class="setlogin-heard">
                            <span>登录</span>
                            <i class="iconfont icon-gerenzhongxin"></i>
                            <strong>账户密码登陆</strong>
        
                        </div>
                <form>
                    <p id="setPhone">
                        <input id="phone" name="firstname" type="text" placeholder="请输入手机号">
                    </p>
                    <div id="codeFat">
                        <input type="text" id="code" placeholder="验证码">
                        <canvas id="canvas" width="100" height="43" onclick="dj()"
                            style="border: 1px solid #ccc; border-radius: 5px;"></canvas>
                        <p id="cut">看不清换一张</p>
                    </div>
                   

                    <div class="codePhone">
                        <input type="text" class="phoneCode" placeholder="手机验证码">
                        <input type="button" class="btnCode" value="获取手机验证码">
                    </div>
                    <p class="setlogin-tishi">
                            <input type="checkbox">自动登陆
                            <a href=""> 忘记密码？</a>
                        </p>
                        <p class="loginBtn">
                            <span>登录</span>
                            <strong>会员注册</strong>
                        </p>
                        <p class="loginfont">
                            提示：未注册的用户将直接注册成为礼拜五的用户
                        </p>
                        <p class="loginFooter">
                            <span></span>
                            <strong class="loginFooter-p">合作网站登录</strong>
                        </p>
                        <div class="disanfang">
                            <i class="iconfont icon-weixin"></i>
                            <span class="iconfont icon-qqicon"></span>
                        </div>

                </form>
            </div>
        </div>
        <div class="footerIframe">
            <iframe src="./Footer.html" frameborder="0"></iframe>
        </div>
    </div>
</body>

</html>

<script src="../../js/jquery-3.4.1.js"></script>
<script src="../../js/jquery.validate.js"></script>
<script src="../../js/gVerify.js"></script>
<script src="../../js/code.js"></script>

<script>
    $(function(){
        $(".setReigsiter").css("display","none")
        $(".back").css("display","none")
    })
    var cut = document.getElementById('cut');
    cut.onclick = function () {
        draw(show_num);
    };

    function dj() {
        draw(show_num);
    }

    // jQuery.validator.addMethod("isPhone", function(value, element) {
    //     var length = value.length;
    //     var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    //     return this.optional(element) || (length == 11 && mobile.test(value));
    // }, "请填写正确的手机号码");
    // phone: {
    //     required:true,
    //         isPhone:true
    // }

    $("#phone").on("blur", function () {
        var onoff = isTelphoneNumber($(this).val());
        if (onoff) {

        } else {
            $("<span>").html("你输入的手机号格式有误，请重新输入").addClass("iconfont icon-gantanhao").addClass("jinggao")
                .appendTo("#setPhone");
        }
        $("#phone").on("focus", function () {

            $(".jinggao").remove()
        })
    });

    function isTelphoneNumber(telNum) {
        // 手机号码长度是11位
        if (telNum.length != 11) {
            return false;
        }
        //移动
        let CM_NUM = "^((13[4-9])|(147)|(15[0-2,7-9])|(17[8])|(18[2-4,7-8]))\\d{8}|(170[5])\\d{7}$";

        //联通
        let CU_NUM = "^((13[0-2])|(145)|(15[5-6])|(17[156])|(18[5,6]))\\d{8}|(170[4,7-9])\\d{7}$";

        //电信
        let CT_NUM = "^((133)|(149)|(153)|(17[3,7])|(18[0,1,9]))\\d{8}|(170[0-2])\\d{7}$";

        let isMatch_CM = telNum.match(CM_NUM); // 匹配移动
        let isMatch_CU = telNum.match(CU_NUM); // 匹配联通
        let isMatch_CT = telNum.match(CT_NUM); // 匹配电信
        if (isMatch_CM || isMatch_CT || isMatch_CU) {
            return true;
        }
        return false;
    }
    $(".loginBtn strong").click(function () {
        $(".setReigsiter").css("display","block")
        $(".setlogin").css("display","none")
        $(".logoImage span").html("会员注册")
    })
</script>